<!--
 * @Author: actor
 * @Date: 2023-11-13 15:42:28
 * @email: 395593455@qq.com
 * @LastEditors: actor
 * @LastEditTime: 2023-12-19 10:14:23
 * @FilePath: \i-hos-app\shared\emr\src\components\common\DropDownList.vue
 * @Description: 下拉组件
-->
<template>
  <div class="dropDownList" id="dropDownList" :data-list="JSON.stringify(val.option)">
    <el-checkbox-group v-if="val.multi" v-model="checkList">
      <el-checkbox v-for="(item, index) in val.option.split('\n')" :key="'dropDownList_01' + index" :label="item" />
      <el-button link type="primary" @click="handClick">确定</el-button>
    </el-checkbox-group>
    <ul v-else>
      <li v-for="(item, index) in val.option.split('\n')" :key="'dropDownList_02' + index" @click="handClick(item)">{{
        item
      }}</li>
    </ul>
  </div>
</template>

<script setup lang="ts">
  import { toRefs, Ref, ref } from 'vue'
  // 接口约束
  import { IPageConfigStore } from '../../interface/page'
  // 获取公共的hooks
  import { useCommon } from '../../hooks/useCommon'
  // store数据
  import { usePageConfigStore } from '../../store/pageConfig'
  // 解构 store的配置数据, 获取光标的位置或选定对象
  const pageConfigStore: IPageConfigStore = usePageConfigStore()
  const { val } = toRefs<any>(pageConfigStore)
  const checkList = ref<Ref<string[]>>()
  // 获取设置属性
  const { setConfig } = useCommon()

  const handClick = (flag?: string): void => {
    // 修改配置仓库
    pageConfigStore.$patch?.((state: IPageConfigStore) => {
      let domEl = document.getElementById(state.el) as any
      if (!!state.val.multi && checkList.value != undefined) {
        state.val.textVal = checkList.value.toString()
        domEl.innerText = checkList.value.toString()
      } else {
        state.val.textVal = flag
        domEl.innerText = flag
      }
      state.commonComponentActive = ''
      setConfig()
    })
  }
</script>

<style scoped lang="scss">
  .dropDownList {
    transition: all 0.2s;
    background: #fff;
    box-shadow: 0 0 3px rgb(0 0 0 / 30%);
    border-radius: 2px;
    z-index: 99;
    .el-checkbox-group {
      display: flex;
      flex-direction: column;
      .el-button {
        border-top: 1px solid #e7e7e7;
        padding: 5px 0;
      }
    }
    ul {
      margin: 0;
      list-style-type: none;
      padding: 0;
    }
    li,
    .el-checkbox {
      padding: 2px 8px;
      cursor: pointer;
      font-size: var(--theme-font-size);
      line-height: 1.5em;
      margin: 0;
      color: #000;
      &:hover {
        background-color: #e7e7e7;
        color: #409eff;
      }
    }
    &::before {
      content: '';
      display: block;
      width: 10px;
      height: 10px;
      position: absolute;
      left: 10px;
      top: -3px;
      z-index: -1;
      background: #fff;
      transform: rotate(45deg);
      box-shadow: -2px -2px 2px hsla(0, 0%, 0%, 0.1);
    }
  }
</style>
